---
layout: default
class: fill-light
options: full
section: Mapbox.js
hasdocnav: true
examples:
  - id: animation
    name: Animation
  - id: features
    name: Features
  - id: cluster
    name: Marker clustering
  - id: turf
    name: Turf GIS
  - id: geocoding
    name: Geocoding
  - id: layers
    name: Layers
  - id: leaflet
    name: Leaflet
  - id: zoompan
    name: "Zoom & Pan"
  - id: legend
    name: Legend
  - id: markers
    name: Markers
  - id: plugins
    name: Plugins
  - id: tilemill
    name: TileMill interactivity
  - id: tooltips
    name: Tooltips
  - id: omnivore
    name: "Format support (omnivore plugin)"
  - id: ui
    name: User interface
  - id: vector
    name: Vector overlays
---

<div class='static-header-page'>

<link href='{{site.baseurl}}/assets/css/site.css' rel='stylesheet' />
<link href='https://www.mapbox.com/css/docs.css' rel='stylesheet' />
<script src='{{site.baseurl}}/assets/js/prettify.js'></script>
<script src='{{site.baseurl}}/assets/js/site.js'></script>

<!--Fixed sidebar navigation-->
<div class='docnav hide-mobile'>
  <div class='limiter'><div class='col3 contain'>
    <nav class='scroll-styled quiet-scroll'>

      {% if page.categories contains 'api' %}
      {% include api.nav.html %}
      {% endif %}

      {% if page.url contains 'example' %}
      <div class='space-bottom'>
        <a class='block quiet active strong small truncate' href='{{site.baseurl}}/examples/'>Examples</a>
      </div>
      {% for example in layout.examples %}
      <div class='space-bottom1'>
        <strong class='block quiet small'>{{example.name}}</strong>
        {% assign sorted = site.tags[example.id] | reverse %}
        {% for listing in sorted %}
          <a href='{{site.baseurl}}{{listing.url}}' class='block small truncate {% if listing.title == page.title %} active{% endif %}'>{{listing.title}}</a>
        {% endfor %}
      </div>
      {% endfor %}
      {% endif %}

      {% if page.url contains 'plugins' %}
      <div class='space-bottom'>
        <a class='block quiet strong small truncate active' href='{{site.baseurl}}/plugins/'>Plugins</a>
      </div>
      <div class='space-bottom'>
        {% for plugin in site.categories.plugin %}
        <a href='{{site.baseurl}}/plugins/#{{plugin.prefix}}' class='block small truncate'>{{plugin.title}}</a>
        {% endfor %}
      </div>
      {% endif %}

    </nav>
  </div></div>
</div>

<div class='limiter clearfix'>

  <div class="pad2y">
    <div class="margin3 col9 keyline-all round space-bottom contain fill-orange">
      <div class="contain pad2 fill-lighten3">
        <h3>Legacy</h3>
        <p class="prose">Mapbox.js is no longer in active development. To learn more about our newer mapping tools see <a href="https://docs.mapbox.com/mapbox-gl-js/">Mapbox GL JS.</a></p>
      </div>
    </div>
  </div>

  <div class='pad2y'>
    <nav class='contain z10 margin3 col9 fill-green space-bottom round small'>
      <div class='col3 dark round-left keyline-right pad2y pad1x center truncate'>
        <strong class='icon brackets'>Mapbox.js</strong>
      </div>
      <div class='col9 dark tabs mobile-cols pad1'><!--
        --><a href='{{site.baseurl}}/api' class='col4 {% if page.categories contains "api" %}active{% endif %}'>API</a><!--
        --><a href='{{site.baseurl}}/examples' class='col4 {% if page.url contains "example" %}active{% endif %}'>Examples</a><!--
        --><a href='{{site.baseurl}}/plugins' class='col4 {% if page.url contains "plugins" %}active{% endif %}'>Plugins</a>
      </div>
    </nav>
  </div>
  <div class='contain margin3 col9'>
  {{content}}
  </div>
</div>

</div>
